<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/admin.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css"/>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>	
</head>
<body>
  <%@ include file="header.jsp" %>	
    

    <div class="main_content">               
    <div class="center_content">               
<div style="margin:20px 0;"></div>
     <table id="dg" title="Users Detail" class="easyui-datagrid" style="width:1300px;height:250px" data-options="singleSelect:true,collapsible:true,url:'./user/userDetail',method:'GET'" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th data-options="field:'userId',width:250">USER ID</th>
                <th data-options="field:'fname',width:250">First Name</th>
                <th data-options="field:'mname',width:250">Middle Name</th>
                <th data-options="field:'lname',width:250">Last Name</th>
                <th data-options="field:'password',width:250">Password</th>
                <th data-options="field:'regno',width:250">Registration No</th>
                <th data-options="field:'transpwd',width:250">Transaction Password</th>
                <th data-options="field:'gender',width:250">Gender</th>
                <th data-options="field:'phone',width:250">Phone No</th>
                <th data-options="field:'mobile',width:250">Mobile No</th>
                <th data-options="field:'emailID',width:350">Email ID</th>
                <th data-options="field:'paddress',width:250">Permanent Address</th>
                 <th data-options="field:'caddress',width:250">Corresponding Address</th>
                <th data-options="field:'postcode',width:250,">Post Code</th>
                <th data-options="field:'city',width:250">City</th>
                <th data-options="field:'country',width:250">Country</th>
                <th data-options="field:'idproof',width:250">ID Proof</th>
                 <th data-options="field:'idproofno',width:250">ID Proof No</th>
            </tr>
        </thead>
    </table>
    </div>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
    </div>
    
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">User Information</div>
        <form id="fm" method="post" novalidate>
            <div class="fitem">
                <label>First Name:</label>
                <input name="fname" class="easyui-textbox" required="true"/>
            </div>
            <div class="fitem">
                <label>Last Name:</label>
                <input name="lname" class="easyui-textbox" required="true"/>
            </div>
            <div class="fitem">
                <label>Phone:</label>
                <input name="phone" class="easyui-textbox"/>
            </div>
            <div class="fitem">
                <label>Email:</label>
                <input name="emailID" class="easyui-textbox" validType="email"/>
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
   <script type="text/javascript">


var url;

function editUser(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $('#dlg').dialog('open').dialog('setTitle','Edit User');
        $('#fm').form('load',row);
        url = './user/updateUserAcc?id='+row.userId;
    }
}
function saveUser(){
    $('#fm').form('submit',{
        url: url,
        onSubmit: function(){
        	return $(this).form('validate');
        },
        success: function(result){
            var result1 = eval('('+result.msg+')');
             if (result.msg){
                $.messager.show({
                    title: 'Error',
                    msg: result.errorMsg
                });
            } else {
                $('#dlg').dialog('close');        // close the dialog
                $('#dg').datagrid('reload');    // reload the user data
            }
        }
    });
}
function destroyUser(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $.messager.confirm('Confirm','Are you sure you want to delete this user?',function(r){
            if (r){
                $.post('./broker/deleteUAccount',{id:row.userId},function(result){
                    if (result.success){
                        $('#dg').datagrid('reload');   
                        } else {
                        $.messager.show({    
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                },'json');
            }
        });
    }
}
</script>
<style type="">
 #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:160px;
        }
</style>
   

  </div>         
                    

              
        	
  	<%@ include file="footer.jsp" %>	 	
</body>
</html>